@charset "utf-8";
.#{$prefix}grid__row{
    margin: 0 -10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: table\0;
    width: 100%\0;
}
.#{$prefix}grid__row [class*=tea-grid__col]{
    padding-left: 10px;
    padding-right: 10px;
    display: table-cell\0;
}
.#{$prefix}grid__box{
    height: 100%;
}
.#{$prefix}grid__row.#{$prefix}vertical--top{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
}
.#{$prefix}grid__row.#{$prefix}vertical--middle{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.#{$prefix}grid__row.#{$prefix}vertical--bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.#{$prefix}grid__row.#{$prefix}vertical--top .#{$prefix}grid__box,
.#{$prefix}grid__row.#{$prefix}vertical--middle .#{$prefix}grid__box,
.#{$prefix}grid__row.#{$prefix}vertical--bottom .#{$prefix}grid__box{
    height: auto;
}
.#{$prefix}grid__row.#{$prefix}vertical--top [class*=tea-grid__col]{
    vertical-align: top;
}
.#{$prefix}grid__row.#{$prefix}vertical--center [class*=tea-grid__col]{
    vertical-align: middle;
}
.#{$prefix}grid__row.#{$prefix}vertical--bottom [class*=tea-grid__col]{
    vertical-align: bottom;
}
.#{$prefix}grid__col-1 {
    width: 4.1667%;
}
.#{$prefix}grid__col-2 {
    width: 8.3333%;
}
.#{$prefix}grid__col-3 {
    width: 12.5000%;
}
.#{$prefix}grid__col-4 {
    width: 16.6667%;
}
.#{$prefix}grid__col-5 {
    width: 20.8333333%;
}
.#{$prefix}grid__col-6 {
    width: 25%;
}
.#{$prefix}grid__col-7 {
    width: 29.1666667%;
}
.#{$prefix}grid__col-8 {
    width: 33.3333333%;
}
.#{$prefix}grid__col-9 {
    width: 37.5%;
}
.#{$prefix}grid__col-10 {
    width: 41.6666667%;
}
.#{$prefix}grid__col-11{
    width: 45.8333333%;
}
.#{$prefix}grid__col-12{
    width: 50%;
}
.#{$prefix}grid__col-13{
    width: 54.1666667%;
}
.#{$prefix}grid__col-14 {
    width: 58.3333333%;
}
.#{$prefix}grid__col-15 {
    width: 62.5%;
}
.#{$prefix}grid__col-16{
    width: 66.6666667%;
}
.#{$prefix}grid__col-17{
    width: 70.8333333%;
}
.#{$prefix}grid__col-18{
    width: 75%;
}
.#{$prefix}grid__col-19{
    width: 79.1666667%;
}
.#{$prefix}grid__col-20{
    width: 83.3333333%;
}
.#{$prefix}grid__col-21{
    width: 87.5%;
}
.#{$prefix}grid__col-22{
    width: 91.6666667%;
}
.#{$prefix}grid__col-23{
    width: 95.8333333%;
}
.#{$prefix}grid__col-24 {
    width: 100%;
}


//5列栅格
.#{$prefix}grid--columns-5 .#{$prefix}grid__col-1{
    width: 20%;
}
.#{$prefix}grid--columns-5 .#{$prefix}grid__col-2{
    width: 40%;
}
.#{$prefix}grid--columns-5 .#{$prefix}grid__col-3{
    width: 60%;
}
.#{$prefix}grid--columns-5 .#{$prefix}grid__col-4{
    width: 80%;
}
.#{$prefix}grid--columns-5 .#{$prefix}grid__col-5{
    width: 100%;
}


// 带分割线
.#{$prefix}grid--split-line{}
.#{$prefix}grid--split-line [class*="tea-grid__col"]{position: relative;}
.#{$prefix}grid--split-line [class *="tea-grid__col"]:before{content: ""; display: inline-block;position: absolute; top:0px; left:0; bottom:0px; border-right: 1px solid #ddd;}
.#{$prefix}grid--split-line [class *= "tea-grid__col"]:first-child:before{border-right: 0;}